<script setup lang="js">
import {ref} from 'vue'
import {ElMessage} from 'element-plus'
// 引入其他的js文件，需要定义 .mjs 不然加载不了，
import {getToken} from "../utils/code.mjs"

const count = ref(0)
const message = ref("我是自定义按钮1的页面")

const open2 = () => {
  ElMessage({
    message: 'Congrats, this is a success message.',
    type: 'success',
  })
}
const open3 = () => {
  ElMessage({
    message: 'Warning, this is a warning message.',
    type: 'warning',
  })
}

function getCodeFunc() {
  let code = getToken();
  ElMessage.success("编号：" + code)
}
</script>

<template>
  <div class="main-page">
    <h2>{{ message }} ------> {{ count }}</h2>
    <div class="btn-group">
      <el-button type="info" @click="open2">Info</el-button>
      <el-button type="warning" @click="open3">Warning</el-button>
      <el-button type="danger" @click="getCodeFunc">Danger</el-button>
    </div>
  </div>
</template>

<style scoped lang="less">
.main-page {
  width: 100%;
  height: 100%;

  .btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
}
</style>